<template>
  <div class="body">
<!--    <div class="tab">
      <div :class="{'active':active}" @click="actives(false)">用户团队</div>
      <div :class="{'active':!active}" @click="actives(true)" v-if="userInform.level != null&&userInform.level.allowInvite === true">代理团队</div>
    </div> -->
    <div v-if="active">
      <view class="content">
        <div class="top">
          <div class="l">
            <div class="name">我的用户团队（人）</div>
            <div class="money">{{ listUser.length }}</div>
          </div>
          <p></p>
          <div class="r">
            <div class="name">总收益（金币）</div>
            <div class="money">{{ amountContUser }}</div>
          </div>
        </div>
        <scroll-view v-if="listUser.length >= 1" class="ul" scroll-y="true">
          <div class="li" v-for="time in listUser">
            <div class="l">
              <div class="title">
                <image src="../../static/zml/avatar.png" mode="widthFix"></image>
                <div class="name">{{ time.nickName }}</div>
<!--                <image src="../../static/index/荣耀宗师.png" mode="widthFix"></image>-->
              </div>
              <div class="code">
                手机号: {{ time.phoneNumber==null?'未绑定':time.phoneNumber }}
              </div>
            </div>
            <div class="r">
              <div class="money">
                <span>总消费（金币）</span>
                <span class="men">{{ time.theAmountSpent }}</span>
              </div>
              <div class="time">截至时间：{{ times }}</div>
            </div>
          </div>
        </scroll-view>
        <div class="null" v-if="listUser.length <= 0">
          <image src="../../static/null.png" mode="widthFix"></image>
          <div class="text">暂无快去邀请吧!</div>
        </div>
      </view>
    </div>
<!--    //代理-->
    <div v-else>
      <view class="content">
        <div class="top">
          <div class="l">
            <div class="name">我的代理团队（人）</div>
            <div class="money">{{ listAgent.length }}</div>
          </div>
          <p></p>
          <div class="r">
            <div class="name">总收益（元）</div>
            <div class="money">{{ amountCont | formatDecimal}}</div>
          </div>
        </div>
        <scroll-view v-if="listAgent.length >= 1" class="ul" scroll-y="true">
          <div class="li" v-for="time in listAgent">
            <div class="l">
              <div class="title">
                <image :src="time.avatar" mode="widthFix"></image>
                <div class="name">{{ time.name }}</div>
<!--                <image :src="time.level.value==='AGENT_1'?'../../static/index/荣耀宗师.png':'../../static/index/尊贵掌门.png'" mode="widthFix"></image>-->
              </div>
              <div class="code">
                手机号: {{ time.phone==null?'未绑定':time.phone }}
              </div>
            </div>
            <div class="r">
              <div class="money">
                <span>总提成（元）</span>
                <span class="men">{{ time.amountCont | formatDecimal}}</span>
              </div>
              <!-- <div class="time">截至时间：{{ times }}</div> -->
            </div>
          </div>
        </scroll-view>
        <div class="null" v-if="listAgent.length <= 0">
          <image src="../../static/null.png" mode="widthFix"></image>
          <div class="text">暂无快去邀请吧!</div>
        </div>
      </view>
    </div>
  </div>
</template>

<script>
import Api from "../../API/api";
	export default {
		data() {
			return {
        active: true,

        listAgent:[], //代理
        amountCont:0,//代理
        times : null,//代理

        listUser:[],  //用户列表
        amountContUser:0, //用户时间
        timesUser : null, //用户

        userInform:{},
        pattern: {
          color: '#7A7E83',
          backgroundColor: '#fff',
          selectedColor: '#007AFF',
          buttonColor: '#3c3e49',
          iconColor: '#fff',
          icon : 'back'
        }
      }
		},
    filters: {
      formatDecimal(value) {
        // 将值转换为 Number 类型，然后使用 toFixed 方法将其格式化为带有两位小数的字符串
        return Number(value).toFixed(2);
      },
    },
    onShow() {
      this.userInform = uni.getStorageSync("userInform")
      this.actives()
      Api.getwxuser().then(res => {
        this.userInform = res.data;
        uni.setStorageSync("userInform",res.data)
      })
    },
    onLoad() {
      this.userInform = uni.getStorageSync("userInform");
      if (this.userInform.level != null && this.userInform.level.allowInvite === true){
        Api.getTeam().then(res => {
          this.listAgent = res.data.team;
          this.times = res.time.split(' ')[0];
          this.amountCont = res.data.amountCont;
        })
      }
      Api.getUserTeam().then(res=>{
        this.listUser= res.data.team;
        this.timesUser= res.time.split(' ')[0];
        this.amountContUser= res.data.amountCont;
      })
    },
		methods: {
      //调转调用
      actives(type){
        if(type===true){
          console.log("团队")
          // 团队active=true
          this.active = false
          return false
        }else{
          //用户active=false
          console.log("用户")
          this.active = true
          return true
        }

      },
		}
	}
</script>

<style lang="less" scoped>

.tab {
  width: 100%;
  height: 96rpx;
  background: #FFFFFF;
  border-radius: 0rpx 0rpx 20rpx 20rpx;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  div {
    margin: 0 30rpx;
    font-size: 32rpx;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 600;
    color: #bbb;
  }

  .active {
    font-weight: 700;
    color: #070E2F;

    &::after {
      margin: auto;
      display: block;
      content: "";
      width: 40rpx;
      height: 8rpx;
      background: #FFBE00;
      border-radius: 4rpx;
      transform: translateY(25rpx);
    }
  }
}
.null {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  image {
    width: 200rpx;
  }
  .text{
    margin-top: 20rpx;
    text-align: center;
    color: #aaa;
    font-size: 26rpx;
  }
}
	.content {
		overflow: hidden;

		.top {
			width: 90%;
			margin: 30rpx auto;
			padding: 50rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 16rpx 2rpx rgba(61, 74, 113, 0.06);
			border-radius: 20rpx;
			border: 1rpx solid;
			border-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
			backdrop-filter: blur(4px);
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			align-items: center;

			&>div {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #070E2F;

				.money {
					margin-top: 20rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #070E2F;

				}
			}

			p {
				width: 2px;
				height: 60rpx;
				background: #D8D8D8;
			}
		}

		.ul {
			margin: 50rpx auto;
			width: 90%;
			// min-height: 400px;
			max-height: 60vh;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.li {
				border-bottom: 1px solid #ccc;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;

				&:last-child {
					border: 0;
				}

				.l {
					.title {
						height: 60rpx;
						display: flex;
						justify-content: start;
						align-items: center;

						.name {
							font-size: 28rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #070E2F;
						}

						image {
							width: 60rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
					}

					.code {
						margin-top: 40rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(7, 14, 47, 0.5);
					}
				}

				.r {

					.money {
						height: 60rpx;
						display: flex;
						align-items: center;
            .men{
              position: relative;

            }
						span {

							line-height: 60rpx;
							color: #070E2F;
							font-size: 24rpx;
							font-weight: 400;

							&:nth-child(2) {
								font-size: 36rpx;
								font-weight: bold;
								color: #070E2F;
							}
						}
					}

					.time {
						text-align: right;
						margin-top: 40rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(7, 14, 47, 0.5);
					}
				}
			}
		}
	}
</style>